<template>
   <div class="tw-libcontainer">
     <div ref="inner" class="tw-libcontainer-inner">
       <slot></slot>
     </div>
   </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'header-navigate',

  props,

  mixins: [style, border],

  computed: {
    style () {
      return Object.assign({
        backgroundColor: this.outsideBg,
        backroundImage: this.outsideBgImage[0],
        backgroundPosition: this.bgAlign,
        backgroundSize: this.backgroundSize,
        outsideGradientColor1: this.outsideGradientColor1,
        outsideGradientColor2: this.outsideGradientColor2,
        outsideGradientDeg: this.outsideGradientDeg,
        bgAlign: this.bgAlign,
        width: this.width,
        insideBg: this.insideBg,
        insideBgImage: this.insideBgImage,
        insideGradientColor1: this.insideGradientColor1,
        insideGradientColor2: this.insideGradientColor2,
        insideGradientDeg: this.insideGradientDeg,
        insideBackgroundSize: this.insideBackgroundSize,
        insideBackgroundRepeat: this.insideBackgroundRepeat,
        insideBgAlign: this.insideBgAlign,
        paddingTop: this.paddingTop,
        paddingBottom: this.paddingBottom,
        paddingLeft: this.paddingLeft,
        paddingRight: this.paddingRight,
        insideBgColor: this.insideBgColor,
        medialPoint: this.medialPoint,
        medialPointWidth: this.medialPointWidth,
        boxShadow: this.boxShadow,
        borderRadius: this.radius,
        shadowColor: this.shadowColor
      }, this.borderStyle)
    }
  },

  methods: {
    setStyle () {
      // ::root 表示组件根元素选择器
      let outsideBgImage = 'none'
      let insideBgImage = 'none'

      // background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("../../media/examples/lizard.png");

      if (this.outsideGradientColor1) {
        outsideBgImage = `linear-gradient(${this.outsideGradientDeg}deg, ${this.outsideGradientColor1}, ${this.outsideGradientColor2 || this.outsideGradientColor1})`
      }

      if (this.outsideBgImage[0]) {
        if (outsideBgImage === 'none') {
          outsideBgImage = `url("${this.$twApp.fileBaseUrl}${this.outsideBgImage[0].localPath}")`
        } else {
          outsideBgImage += `, url("${this.$twApp.fileBaseUrl}${this.outsideBgImage[0].localPath}")`
        }
      }

      if (this.insideGradientColor1) {
        insideBgImage = `linear-gradient(${this.insideGradientDeg}deg, ${this.insideGradientColor1}, ${this.insideGradientColor2 || this.insideGradientColor1})`
      }

      if (this.insideBgImage[0]) {
        if (insideBgImage === 'none') {
          insideBgImage = `url("${this.$twApp.fileBaseUrl}${this.insideBgImage[0].localPath}")`
        } else {
          insideBgImage += `, url("${this.$twApp.fileBaseUrl}${this.insideBgImage[0].localPath}")`
        }
      }

      let style = `
        ::root.tw-libcontainer {
          background-color: ${this.outsideBg};
          background-image: ${outsideBgImage};
          background-position: ${this.bgAlign} center;
          background-size: ${this.backgroundSize};
        }

        ::root > .tw-libcontainer-inner {
          width: ${this.width};
          padding: ${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft};
          background-color: ${this.insideBgColor};
          background-image: ${insideBgImage};
          background-position: ${this.insideBgAlign};
          background-size: ${this.insideBackgroundSize};
          background-repeat: ${this.insideBackgroundRepeat};
          background-origin: ${this.insideBgPosition};
          box-shadow: ${this.shadowColor ? `0 2px 9px ${this.shadowColor}` : 'none'};
          border-radius: ${this.radius};
        }
      `

      if (this.medialPoint && this.medialPointWidth) {
        style += `
          @media (max-width: ${this.medialPoint}) {
            ::root > .tw-libcontainer-inner {
              width: ${this.medialPointWidth};
            }
          }
        `
      }

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
              ::root > .tw-libcontainer-inner {
                border-top: ${border};
              }
            `
        }

        if (this.borderPosition.includes(1)) {
          style += `
              ::root > .tw-libcontainer-inner {
                border-bottom: ${border};
              }
            `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root > .tw-libcontainer-inner {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root > .tw-libcontainer-inner {
              border-right: ${border};
            }
          `
        }
      }

      this.addStyle(style)
    },

    computeMinHeight () {
      if (this.bottom) {
        this.$refs.inner.style.minHeight = window.innerHeight - this.$el.getBoundingClientRect().top - parseInt(this.bottom) + 'px'
      }
    }
  },

  mounted () {
    this.computeMinHeight()
  },

  watch: {
    bottom () {
      this.computeMinHeight()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
